<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:70px' }"
    :wrapper-col="{ style: 'calc(100% - 70px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请填名称!' }]">
      <a-input v-model:value="formState.name" :maxlength="20" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="渠道" name="channelIdList" :rules="[{ required: true, message: '请选择渠道!' }]">
      <a-select v-model:value="formState.channelIdList" mode="multiple" placeholder="请选择" show-search :filter-option="filterOption" :options="serviceOpts"> </a-select>
    </a-form-item>
    <a-form-item label="规则" name="rules" :rules="[{ required: true, message: '请填写规则!' }]">
      <a-textarea v-model:value="formState.rules" :rows="6" :maxlength="200" placeholder="请输入" />
    </a-form-item>
    <div class="rule-list">
      示例: 请使用下面的有效值组成公式；有效值之间要用空格隔开；一个公式一行。例如：长+宽*2+高*2>300 写成：length + width*2 + height *2 > 300
      <div>有效值:</div>
      <a-row :gutter="16">
        <a-col :span="12" v-for="(item, index) in Object.keys(ruleItemMap)" :key="index">{{ item }} : {{ ruleItemMap[item] }}</a-col>
      </a-row>
    </div>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { getDetailsApi } from "@/api/configCenter/volumeLimit/index";
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { ruleItemMap } from "./data";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: VolumeLimit.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { formDataRef, formState, loading, serviceOpts, getAllServiceOpts } = InitHook();
const { onFinish, onFinishFailed, resetFields, resetHandle } = OperationHook({ formDataRef, formState, passData, emit, type, loading, serviceOpts });
const init = () => {
  if (type.value === 2) {
    loading.value = true;
    getDetailsApi(passData.value.id as string)
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          Object.assign(formState, data);
          if (data.channels) {
            formState.channelIdList = data.channels.map((t: any) => t.channelId);
          }
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
  getAllServiceOpts();
};
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0;
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
:deep(.ant-input-number){
    width: 100%;
}
</style>
